<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
      }

      .box {
        z-index: 100;
        position: absolute;
        top: 50px;
        left: 50px;
      }
      #panel {
        display: none;
      }
      .box .line {
        display: flex;
        row-gap: 10px;
        column-gap: 10px;
      }
      .myMark {
        z-index: 1000;
        background-color: white;
        border-radius: 10px;
        padding: 5px;
        min-width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
      }
      .myMark .t1 {
        font-weight: 700;
        flex-wrap: nowrap;
      }
      .myMark .t2 {
        font-size: 12px;
        color: #ccc;
      }
    </style>
  </head>
  <body>
    <!-- <div class="myMark">
      <div class="t1">距您1.2公里</div>
      <div class="t2">预计12分钟到达</div>
    </div> -->
    <div class="box">
      <div class="line">
        <input class="input1" type="text" />
        <button class="locationBtn">定位</button>
      </div>
      <div class="line">
        <input class="input2" type="text" />
        <button class="confirmBtn">确定</button>
      </div>
    </div>
    <div id="container"></div>
    <div id="panel"></div>
  </body>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script
    type="text/javascript"
    src="https://cache.amap.com/lbs/static/addToolbar.js"
  ></script>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "a75ddefa66929d04dd9864b60c66193b",
    };
  </script>
  <script
    type="text/javascript"
    src="https://webapi.amap.com/maps?v=2.0&key=72c772acf17e073f42cfff06975ff3e0&plugin=AMap.Driving&plugin=AMap.PlaceSearch"
  ></script>
  <script
    type="text/javascript"
    src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"
  ></script>
  <script
    type="text/javascript"
    src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"
  ></script>
  <script
    type="text/javascript"
    src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"
  ></script>
  <script
    type="text/javascript"
    src="https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js"
  ></script>
  <script>
    let startLongitude = 116.478935;
    let startLatitude = 39.997761;
    let endLongitude = 116.484648;
    let endLatitude = 39.999861;
    //---------信息窗体-------------
    var infoWindow;
    // JSAPI2.0 使用覆盖物动画必须先加载动画插件
    AMap.plugin("AMap.MoveAnimation", function () {
      var marker,
        lineArr = [
          [116.478935, 39.997761],
          [116.478939, 39.997825],
          [116.478912, 39.998549],
          [116.478912, 39.998549],
          [116.478998, 39.998555],
          [116.478998, 39.998555],
          [116.479282, 39.99856],
          [116.479658, 39.998528],
          [116.480151, 39.998453],
          [116.480784, 39.998302],
          [116.480784, 39.998302],
          [116.481149, 39.998184],
          [116.481573, 39.997997],
          [116.481863, 39.997846],
          [116.482072, 39.997718],
          [116.482362, 39.997718],
          [116.483633, 39.998935],
          [116.48367, 39.998968],
          [116.484648, 39.999861],
        ];

      //初始化地图
      const map = new AMap.Map("container", {
        resizeEnable: true,
        viewMode: "2D", //默认使用 2D 模式
        zoom: 15, //地图级别
        center: [startLongitude, startLatitude], //地图中心点
      });
      //当前位置打点
      //   addMarker({
      //     title: "北京职业技术学院",
      //     content: "老牛湾东路",
      //     longitude: startLongitude,
      //     latitude: startLatitude,
      //   });

      //构造路线导航类
      var driving = new AMap.Driving({
        map: map,
        panel: "panel",
      });
      //搜索
      let value1 = "";
      function change1(e) {
        console.log(e);
      }
      function change2(e) {
        console.log(e);
      }
      document.querySelector(".input1").addEventListener("input", (e) => {
        value1 = e.target.value;
      });
      //   document.querySelector(".confirmBtn").addEventListener("click", () => {
      //点击确定
      // 根据起终点经纬度规划驾车导航路线
      //   driving.search(
      //     new AMap.LngLat(startLongitude, startLatitude),
      //     new AMap.LngLat(endLongitude, endLatitude),
      //     function (status, result) {
      //       // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      //       if (status === "complete") {
      //         console.log("绘制驾车路线完成");
      //         // map.setCenter([116.442581, 39.882498]);
      //       } else {
      //         console.log("获取驾车数据失败：" + result);
      //       }
      //     }
      //   );

      //终点
      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: "./assets/person.svg",
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3),
      });
      marker = new AMap.Marker({
        map: map,
        position: [endLongitude, endLatitude],
        icon: startIcon,
        size: new AMap.Size(100, 100),
        imageSize: new AMap.Size(100, 100),
        offset: new AMap.Pixel(-50, -40),
      });
      //小车
      marker = new AMap.Marker({
        map: map,
        position: [startLongitude, startLatitude],
        icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
        offset: new AMap.Pixel(-13, -26),
      });
      //打点
      //   addMarker({
      //     title: "银行",
      //     content: "中国工商银行",
      //     longitude: endLongitude,
      //     latitude: endLatitude,
      //   });

      //信息窗体   一次只能添加一个信息窗体
      //   openInfo({
      //     msg: "北京科技职业技术学院",
      //     longitude: startLongitude,
      //     latitude: startLatitude,
      //   });
      //   openInfo({
      //     msg: "华为harmonyos",
      //     longitude: endLongitude,
      //     latitude: endLatitude,
      //   });
      //自适应
      map.setFitView();

      // });

      // -----------绘制轨迹----------------
      var polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });

      var passedPolyline = new AMap.Polyline({
        map: map,
        strokeColor: "#AF5", //线颜色
        strokeWeight: 6, //线宽
      });

      marker.on("moving", function (e) {
        passedPolyline.setPath(e.passedPath);
        map.setCenter(e.target.getPosition(), true);
      });

      map.setFitView();

      // window.startAnimation = function startAnimation() {
      marker.moveAlong(lineArr, {
        // 每一段的时长
        duration: 1000, //可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        autoRotation: true,
      });
      // };

      window.pauseAnimation = function () {
        marker.pauseMove();
      };

      window.resumeAnimation = function () {
        marker.resumeMove();
      };

      window.stopAnimation = function () {
        marker.stopMove();
      };

      //信息窗体的方法
      function openInfo(options) {
        //构建信息窗体中显示的内容
        let info = [];
        info.push(`<div>${options.msg}</div>`);

        infoWindow = new AMap.InfoWindow({
          content: info.join(""), //使用默认信息窗体框样式，显示信息内容
        });

        infoWindow.open(map, [options.longitude, options.latitude]);
      }
      //打点的方法
      function addMarker(options) {
        //地图打点
        //点标记显示内容
        const markerContent = `<div class="myMark">
      <div class="t1">${options.title}</div>
      <div class="t2">${options.content}</div>
    </div> `;
        const position = new AMap.LngLat(options.longitude, options.latitude); //Marker 经纬度
        const marker = new AMap.Marker({
          position: position,
          content: markerContent, //将 html 传给 content
          offset: new AMap.Pixel(-50, -80), //以 icon 的 [center bottom] 为原点
        });
        //marker点击事件
        marker.on("click", (e) => {
          if (options.callback) options.callback(e);
        });
        map.add(marker);
      }
    });
  </script>
</html>
